<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">


    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}" type="text/css">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}" type="text/css">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}" type="text/css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}" type="text/css">
    <!-- Morris chart -->
    <link rel="stylesheet" th:href="@{/bower_components/morris.js/morris.css}" type="text/css">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/bower_components/jvectormap/jquery-jvectormap.css}" type="text/css">
    <!-- Date Picker -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css}"
          type="text/css">
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap-daterangepicker/daterangepicker.css}" type="text/css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" th:href="@{/plugins/iCheck/square/blue.css}" type="text/css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>

<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>

    * {
        margin: 0;
        padding: 0;

    }

    body {
        background-color: white;
    }

    #aa {

        margin-top: 60px;

    }

    h2 {
        padding-left: 50px;
        margin-top: 20px;
    }

    a {
        font-weight: 700;
    }
</style>
<body>




    <div class="row"  style="margin-top: 25px;">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <!-- Horizontal Form -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">申请教员</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form  action="/saveapply" method="post" id="myform">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">申请人：</label>
                            <div class="col-sm-10">
                                <input type="hidden" th:value="${session.userinfo.uid}" name="uid">
                                <input type="text" class="form-control" id="inputEmail3" th:value="${session.userinfo.uname}" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">申请理由:</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" placeholder="输入..." name="describe"></textarea>

                                <span id="spandescribe"></span>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="button" onclick="back()" class="btn btn-default">取消</button>
                        <button type="submit" class="btn btn-info pull-right" id="save" onclick="savesub()">提交</button>
                    </div>
                    <!-- /.box-footer -->
                </form>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>


    <!-- jQuery 3 -->
    <script th:src="@{/bower_components/jquery/dist/jquery.min.js}" type="text/javascript"></script>
    <!-- jQuery UI 1.11.4 -->
    <script th:src="@{/bower_components/jquery-ui/jquery-ui.min.js}" type="text/javascript"></script>

    <!-- Bootstrap 3.3.7 -->
    <script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}" type="text/javascript"></script>
    <!-- AdminLTE for demo purposes -->
    <script th:src="@{/plugins/iCheck/icheck.min.js}" type="text/javascript"></script>


<script type="text/javascript">
    //描述不为空验证，注意与表单不一样，不能比较val()值。
    $("[name=describe]").blur(function () {
        if ($("[name=describe]").val() != "") {
            $("[name=describe]").next().text("");
        } else {
            $("[name=describe]").next().text("不能为空").css("color", "red");
        }
    });
    /*保存操作*/
    function savesub() {

        //拿到表单的值
        var describe=$("[name=describe]").val();




        //拿到表单附近的span的判断值
        var spandescribe=$("#spandescribe").text();


        //如果input内容为空阻断提交  如何input后面的span判断有字说明不符合要求，阻断提交
        if (describe == ""||spandescribe!="") {
            $("#myform").bind("submit", (function (e) {
                e.preventDefault();
            }));
            confirm("输入的信息有误，请重新检查");
            return false;
        } else {
            var r=confirm("确认提交？");
            if(r==true){
                $("#myform").unbind("submit");
            }else{

            }
        }
    }

    //返回操作
    function back() {
        window.location.href="/index";

    }


</script>


    <script type="text/javascript">
        <!--下个页面独有的js-->
        var i=[[${i}]];
        if(i==1){
            alert("提交成功！");
            $("#save").attr('disabled',"true");
        }else {
            alert("提交失败，已经申请过，正在处理中！");
        }
    </script>
</body>
</html>